﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>上海良信餐饮费用控制管理系统</title>
    <link rel="shortcut icon" href="http://www.google.com/favicon.ico" />
    @Html.Css("main", "layout", "tree", "tabpanel", "dailog")
</head>
<body>
    <div class="main-panel">
        <div class="top">
        </div>
        <div class="left">
            <div id="panel-header" class="x-panel-header">
                <span class="menupanel">菜单 </span>
            </div>
            <div class="x-panel-bwrap">
                <div id="panel-wrap" class="x-panel-body">
                    <div id="treepanel" class="menutree">
                        <!--menu tree -->
                    </div>
                </div>
            </div>
        </div>
        <div id="tab-container" class="x-tab-panel x-border-panel" style="left: 180px; top: 38px;">
        </div>
        <div class="bottom">
            Copyright &copy; 2012 上海良信后勤管理服务有限公司
        </div>
    </div>
    @Html.Js("jquery", "common", "tree", "tabpanel", "dailog", "easydrag")
    <script src="@Url.Action("Menu")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 计算高度
            var mainh = document.documentElement.clientHeight;
            var mainw = document.documentElement.clientWidth;
            var panelheader = $("#panel-header").outerHeight(); // 左边菜单表头的高度
            var header = 38;
            var bottom = 3;

            // 左边菜单
            var op = { data: menudata, onnodeclick: navi };
            function navi(item) {
                if (item.value) {
                    $("#tab-container").opentabitem({ id: idreplace(item.id), text: item.text, url: item.value, isactive: true, closeable: true }, true);
                }
                else {
                    item.expand();
                }
            }
            function idreplace(id) {
                return id.replace(/[^a-zA-Z\d_]/ig, "_")
            }
            $("#treepanel").treeview(op);

            // 右边Tab控件
            var tabo = {};
            tabo.items = [{ id: "home", text: "主页", classes: "icon_home", isactive: true, content: "<div style='padding:10px;'>欢迎光临!</div>"}];
            tabo.width = mainw - 180;
            tabo.height = mainh - header - bottom - 2;
            $("#tab-container").tabpanel(tabo);

            // 设置窗口大小并注册窗口改变时重置大小的事件
            setpanelsize();
            function setpanelsize() {
                mainh = document.documentElement.clientHeight;
                mainw = document.documentElement.clientWidth;
                var h = mainh - header - panelheader - bottom;
                var w = mainw - 180;
                $("#panel-wrap").height(h);
                $("#tab-container").width(w);
            }
            $(window).resize(window_resize);
            function window_resize() {
                setpanelsize();
                $("#tab-container").resizetabpanel(mainw - 180, mainh - header - bottom - 2);
            }
        }); 
    </script>
</body>
</html>
